<template>
  <div>
    <input type="text" class="search" v-model="searchContent">
    <table border="1">
      <thead>
        <tr>
          <th>
            <span>编号</span>
            <sort :sort-order.sync="orderSort" type="order">
              <img :class="orderSort ? '': 'active'" :src="img1" alt="">
            </sort>
          </th>
          <th>名称</th>
          <th>
          <span>价格</span>
          
          <sort :sort-price.sync="orderPrice" type="price">
            <img :class="orderPrice ? 'oActive' : ''" :src="img2" alt="">
          </sort></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in arr" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
        </tr>
      </tbody>
    </table>
    <pagenation :pageIndex.sync="pageIndex" :page-size.sync="pageSize"></pagenation>
  </div>
</template>
<script>
import sort from '@/components/sort'
import pagenation from '@/components/pagenation'
import img1 from '@/assets/arrow-red.png'
import img2 from '@/assets/arrow-down.png'
export default {
  components: {
    sort,
    pagenation
  },
  data() {
    return {
      arr: [
        {
          id: 10,
          name: '精品手机 华为 200G',
          price: 3200
        },
        {
          id: 9,
          name: '苹果笔记本电脑 i9',
          price: 20000
        },
        {
          id: 8,
          name: '海尔电冰箱 3匹',
          price: 980
        },
        {
          id: 7,
          name: '红米 手机',
          price: 1200
        },
        {
          id: 6,
          name: '华为手机 p40',
          price: 5000
        },
        {
          id: 5,
          name: '锤子手机 200G',
          price: 2000
        },
        {
          id: 4,
          name: '宝马 5系 2驱',
          price: 450000
        },
        {
          id: 3,
          name: '宝马 7系 4驱',
          price: 750000
        },
        {
          id: 2,
          name: '苹果手机 iphone plus',
          price: 4500
        },
        {
          id: 1,
          name: 'vivo 手机 p30',
          price: 1242
        }
      ],
      orderSort: false,
      orderPrice: false,
      searchContent: '',
      pageIndex: 1,
      count: 1,
      pageSize: 10,
      $arr: [],
      img1: img1,
      img2: img2
    }
  },
  created() {
    this.$arr = JSON.stringify(this.arr)
  },
  methods: {
    sortData(type, to) {
      this.arr = this.arr.sort((a, b) => {
        if(to) {
          return a[type] - b[type]
        } else {
          return b[type] - a[type]
        }
      })
    }
  },

  watch: {
    orderSort(to, from) {
      this.sortData('id', to)
      this.img1 = img1
      this.img2 = img2
    },

    orderPrice(to, from) {
      // console.log(to);
      this.sortData('price', to)
      this.img1 = img2
      this.img2 = img1
    },
    pageSize(to) {
      let data = JSON.parse(this.$arr)
      this.arr = data.splice(0, to)
    },
    pageIndex(to) {
      let data = JSON.parse(this.$arr)
      this.arr = data.splice((to - 1)*this.pageSize, this.pageSize)
    },

    searchContent(to) {
      let data = JSON.parse(this.$arr)
      this.arr = data.filter(item => {
        return item.name.includes(to)
      })
    }
  }
}
</script>
<style scoped>
  .search {
    width: 170px;
    height: 30px;
    border-radius: 4px;
    outline: none;
    border: 2px solid #ccc;
  }

  .search:focus {
    border-color: greenyellow;
  }
  table {
    width: 100%;
    border-color: 1px solid #ccc;
    margin-top: 20px;
    border-collapse: collapse;
  }
  td {
    font-size: 20px;
    padding: 4px 0;
  }
  thead {
    background-color: #ccc;
  }
  thead tr th {
    padding:  10px 0;
   
  }
  thead tr th span {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }
  span img{
    margin-top: 4px;
  }
  .active, .oActive {
    transform: rotate(180deg);
  }
</style>